<template>
  <div>
    <el-table
      stripe
      border
      :data="diaryData"
      v-loading="loading">
      <el-table-column type="expand">
        <div slot-scope="props">
          <el-card>
            <div
              slot="header"
              class="clearfix">
              <span>工作列表</span>
              <el-button
                style="float:right;padding:5px"
                type="danger"
                icon="el-icon-delete">
                删除
              </el-button>
              <el-button
                style="float:right;padding:5px;margin-right:5px"
                type="primary"
                icon="el-icon-edit"
                @click="editDiaryInfo(props.row.work_date)">
                编辑
              </el-button>
            </div>
            <el-table :data="workData[props.row.work_date]">
              <el-table-column type="index"></el-table-column>
              <el-table-column label="工作类型">
                <div slot-scope="scope">
                    <div v-if="scope.row.work_type == 1">普通</div>
                    <div v-else-if="scope.row.work_type == 2">加班</div>
                    <div v-else-if="scope.row.work_type == 3">缺勤</div>
                </div>
              </el-table-column>
              <el-table-column
                prop="group"
                label="项目">
              </el-table-column>
              <el-table-column
                prop="task"
                label="工作">
              </el-table-column>
              <el-table-column
                prop="duration"
                label="时长">
              </el-table-column>
            </el-table>
            <h3>备注:</h3>
            <p>{{props.row.details}}</p>
          </el-card>
        </div>
      </el-table-column>
      <el-table-column
        prop="work_date"
        label="日期"
        sortable>
      </el-table-column>
      <el-table-column
        prop="created_date"
        label="提交日期"
        sortable>
      </el-table-column>
      <el-table-column
        prop="evaluate"
        label="评价">
      </el-table-column>
      <el-table-column
        prop="duration"
        label="时长">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  name: 'diary-table',
  data () {
    return {
    }
  },
  computed: mapState({
    diaryData: state => state.diaryList,
    workData: state => state.workList,
    loading: state => state.loading
  }),
  created () {
    this.getDiaryList()
  },
  methods: {
    ...mapActions([
      'getDiaryList'
    ]),
    editDiaryInfo (workDate) {
      this.$store.commit('setDiaryFormData', {type: 'edit', date: workDate})
      this.$router.push({name: 'DiaryEditView'})
    }
  }
}
</script>
<style scoped>
.content-rowspan div {
  padding-left: 18px;
  line-height: 46px;
  border-bottom: 1px solid #ECEDEE;
}
.content-rowspan div:last-child {
  border-bottom: 0;
}
.table_colum .cell {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.diary-edit-button {
  margin-bottom: 20px;
}
th.table_colum .cell {
  padding-left: 18px !important;
}
</style>